<template>
  <div class="app-container comprehensive-info">
    <!-- 个人信息板块 -->
    <el-row :gutter="20" class="section">
      <el-col :span="24">
        <el-card class="info-card">
          <div slot="header" class="clearfix">
            <span><i class="el-icon-user-solid"></i> 个人信息</span>
          </div>
          <el-form :model="personalInfo" label-width="100px" :disabled="true">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="姓名">
                  <el-input v-model="personalInfo.name" placeholder="请输入姓名"></el-input>
                </el-form-item>
                <el-form-item label="学号">
                  <el-input v-model="personalInfo.studentId" placeholder="请输入学号"></el-input>
                </el-form-item>
                <el-form-item label="专业">
                  <el-input v-model="personalInfo.major" placeholder="请输入专业"></el-input>
                </el-form-item>
                <el-form-item label="班级">
                  <el-input v-model="personalInfo.class" placeholder="请输入班级"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系方式">
                  <el-input v-model="personalInfo.contact" placeholder="请输入联系方式"></el-input>
                </el-form-item>
                <el-form-item label="邮箱">
                  <el-input v-model="personalInfo.email" placeholder="请输入邮箱"></el-input>
                </el-form-item>
                <el-form-item label="出生日期">
                  <el-input v-model="personalInfo.birthDate" placeholder="请输入出生日期"></el-input>
                </el-form-item>
                <el-form-item label="籍贯">
                  <el-input v-model="personalInfo.hometown" placeholder="请输入籍贯"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </el-col>
    </el-row>

    <!-- 毕业论文基本信息展示区 -->
    <el-row :gutter="20" class="section">
      <el-col :span="24">
        <el-card class="info-card">
          <div slot="header" class="clearfix">
            <span><i class="el-icon-document"></i> 毕业论文基本信息</span>
          </div>
          <el-form :model="thesisInfo" label-width="100px" :disabled="true">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="论文题目">
                  <el-input v-model="thesisInfo.title" placeholder="请输入论文题目" type="textarea" :rows="2"></el-input>
                </el-form-item>
                <el-form-item label="指导老师">
                  <el-input v-model="thesisInfo.supervisor" placeholder="请输入指导老师"></el-input>
                </el-form-item>
                <el-form-item label="完成时间">
                  <el-input v-model="thesisInfo.completionDate" placeholder="请输入完成时间"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="论文摘要">
                  <el-input v-model="thesisInfo.abstract" placeholder="请输入论文摘要" type="textarea" :rows="4"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </el-col>
    </el-row>

    <!-- 毕业论文成果详细介绍模块 -->
    <el-row :gutter="20" class="section">
      <el-col :span="24">
        <el-card class="info-card">
          <div slot="header" class="clearfix">
            <span><i class="el-icon-trophy"></i> 论文成果介绍</span>
          </div>
          <div class="result-content">
            <h4>研究背景与意义</h4>
            <p>{{ thesisResult.background }}</p>
            
            <h4>主要研究内容</h4>
            <p>{{ thesisResult.content }}</p>
            
            <h4>研究方法</h4>
            <p>{{ thesisResult.methodology }}</p>
            
            <h4>创新点</h4>
            <p>{{ thesisResult.innovation }}</p>
            
            <h4>研究成果</h4>
            <p>{{ thesisResult.achievements }}</p>
            
            <h4>应用前景</h4>
            <p>{{ thesisResult.prospects }}</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'ComprehensiveInfo',
  data() {
    return {
      personalInfo: {
        name: '胡鑫慧',
        studentId: '116420220025',
        major: '计算机科学与技术',
        class: '计科2001班',
        contact: '13812345678',
        email: 'huxinhui@example.com',
        birthDate: '2000-01-15',
        hometown: '江苏省南京市'
      },
      thesisInfo: {
        title: '基于深度学习的图像识别算法研究',
        supervisor: '张教授',
        completionDate: '2022年6月',
        abstract: '本研究提出了一种改进的深度学习图像识别算法，通过优化神经网络结构和训练策略，显著提高了图像识别的准确率和实时性能。实验结果表明，该算法在多个公开数据集上的表现优于现有方法，具有广泛的应用前景。'
      },
      thesisResult: {
        background: '随着计算机视觉技术的快速发展，图像识别在自动驾驶、安防监控、医疗诊断等领域的应用越来越广泛。传统的图像识别方法在复杂场景下准确率不足，难以满足实际应用需求。深度学习技术的兴起为解决这一问题提供了新的思路。',
        content: '本研究主要包含以下内容：1）分析了现有深度学习图像识别算法的优缺点；2）设计了一种基于注意力机制的卷积神经网络结构；3）提出了一种混合损失函数，结合分类损失和对比损失；4）开发了自适应学习率调整策略；5）在多个公开数据集上进行了实验验证。',
        methodology: '研究采用了理论分析与实验验证相结合的方法。首先，通过文献综述分析了现有技术的不足；然后，基于深度学习理论设计了新的算法模型；接着，使用Python和TensorFlow框架实现了算法；最后，在ImageNet、COCO等数据集上进行了对比实验。',
        innovation: '本研究的主要创新点包括：1）提出了一种多尺度特征融合的注意力机制，能够有效提取图像的关键特征；2）设计了一种动态权重调整的混合损失函数，提高了模型的泛化能力；3）开发了一种基于模型性能的自适应学习率策略，加速了模型收敛。',
        achievements: '研究取得了以下成果：1）在ImageNet数据集上，Top-1准确率达到了92.5%，比现有方法提高了2.3%；2）模型推理速度提升了30%，能够满足实时应用需求；3）在小样本学习场景下，模型表现出更好的鲁棒性；4）发表学术论文2篇，申请发明专利1项。',
        prospects: '该研究成果具有广阔的应用前景。在自动驾驶领域，可以用于行人检测、车道识别等关键任务；在安防监控中，可以提高人脸识别、异常行为检测的准确率；在医疗诊断方面，可以辅助医生进行医学影像分析；在零售领域，可以应用于商品识别和库存管理。未来，我们将进一步优化算法，拓展其在更多领域的应用。'
      }
    }
  },
  created() {
    // 可以在这里加载实际数据
    this.loadData()
  },
  methods: {
    loadData() {
      // 实际项目中可以从后端获取数据
      // 这里使用模拟数据
      console.log('加载个人和论文信息数据')
    }
  }
}
</script>

<style scoped>
.comprehensive-info {
  padding: 20px;
}

.section {
  margin-bottom: 30px;
}

.info-card {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.result-content h4 {
  margin-top: 20px;
  margin-bottom: 10px;
  color: #409EFF;
  font-size: 16px;
  font-weight: 500;
}

.result-content p {
  line-height: 1.8;
  text-align: justify;
  color: #606266;
  margin-bottom: 15px;
}
</style>